<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ricky's land</title>
    <link
      rel="stylesheet"
      href="./bootstrap-5.3.0-alpha1-dist (1)/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"
    />
    <style>
      .rainbowcard {
        margin-bottom: 1rem;
        background: #07182e;
        position: relative;
        display: flex;
        justify-content: center;
        place-content: center;
        place-items: center;
        overflow: hidden;
        border-radius: 5px;
      }

      .rainbowcard h1 {
        z-index: 1;
        color: white;
        font-size: 2em;
      }

      .rainbowcard::before {
        content: '';
        position: absolute;
        width: 429.8667vw;
        background-image: linear-gradient(
          180deg,
          rgb(0, 183, 255),
          rgb(255, 48, 255)
        );
        height: 130%;
        animation: rotBGimg 3s linear infinite;
        transition: all 1s linear;
      }

      @keyframes rotBGimg {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .rainbowcard::after {
        content: '';
        position: absolute;
        background: #07182e;
        inset: 5px;
        border-radius: 15px;
      }
      /* .card:hover:before {
        background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
        animation: rotBGimg 3.5s linear infinite;
      } */

      /* 手掌效果 */
      .🤚 {
        --skin-color: #e4c560;
        --tap-speed: 0.6s;
        --tap-stagger: 0.1s;
        position: relative;
        width: 80px;
        height: 60px;
        margin-left: 80px;
      }

      .🤚:before {
        content: '';
        display: block;
        width: 180%;
        height: 75%;
        position: absolute;
        top: 70%;
        right: 20%;
        background-color: black;
        border-radius: 40px 10px;
        filter: blur(10px);
        opacity: 0.3;
      }

      .🌴 {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--skin-color);
        border-radius: 10px 40px;
      }

      .👍 {
        position: absolute;
        width: 120%;
        height: 38px;
        background-color: var(--skin-color);
        bottom: -18%;
        right: 1%;
        transform-origin: calc(100% - 20px) 20px;
        transform: rotate(-20deg);
        border-radius: 30px 20px 20px 10px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        border-left: 2px solid rgba(0, 0, 0, 0.1);
      }

      .👍:after {
        width: 20%;
        height: 60%;
        content: '';
        background-color: rgba(255, 255, 255, 0.3);
        position: absolute;
        bottom: -8%;
        left: 5px;
        border-radius: 60% 10% 10% 30%;
        border-right: 2px solid rgba(0, 0, 0, 0.05);
      }

      .👉 {
        position: absolute;
        width: 80%;
        height: 35px;
        background-color: var(--skin-color);
        bottom: 32%;
        right: 64%;
        transform-origin: 100% 20px;
        animation-duration: calc(var(--tap-speed) * 2);
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        transform: rotate(10deg);
      }

      .👉:before {
        content: '';
        position: absolute;
        width: 140%;
        height: 30px;
        background-color: var(--skin-color);
        bottom: 8%;
        right: 65%;
        transform-origin: calc(100% - 20px) 20px;
        transform: rotate(-60deg);
        border-radius: 20px;
      }

      .👉:nth-child(1) {
        animation-delay: 0;
        filter: brightness(70%);
        animation-name: tap-upper-1;
      }

      .👉:nth-child(2) {
        animation-delay: var(--tap-stagger);
        filter: brightness(80%);
        animation-name: tap-upper-2;
      }

      .👉:nth-child(3) {
        animation-delay: calc(var(--tap-stagger) * 2);
        filter: brightness(90%);
        animation-name: tap-upper-3;
      }

      .👉:nth-child(4) {
        animation-delay: calc(var(--tap-stagger) * 3);
        filter: brightness(100%);
        animation-name: tap-upper-4;
      }

      @keyframes tap-upper-1 {
        0%,
        50%,
        100% {
          transform: rotate(10deg) scale(0.4);
        }

        40% {
          transform: rotate(50deg) scale(0.4);
        }
      }

      @keyframes tap-upper-2 {
        0%,
        50%,
        100% {
          transform: rotate(10deg) scale(0.6);
        }

        40% {
          transform: rotate(50deg) scale(0.6);
        }
      }

      @keyframes tap-upper-3 {
        0%,
        50%,
        100% {
          transform: rotate(10deg) scale(0.8);
        }

        40% {
          transform: rotate(50deg) scale(0.8);
        }
      }

      @keyframes tap-upper-4 {
        0%,
        50%,
        100% {
          transform: rotate(10deg) scale(1);
        }

        40% {
          transform: rotate(50deg) scale(1);
        }
      }
    </style>

  </head>
  <body>
    <div class="container-fluid row bg-dark m-0">
      <!-- 卡片样式 -->
      <div class="card bg-warning col-sm-12 col-md-8 m-auto">
        <!-- 卡片主要内容 -->
        <div class="card-body">
          <!-- 卡片标题 -->
          <div class="rainbowcard">
            <h1 class="card-title text-center text-xl-center h1">
              Ricky♂hub <br />ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ
            </h1>
          </div>

          <!-- 放作业的链接 -->
          <div class="card bg-dark text-light">
            <!-- 卡片头部 -->
            <div class="card-header bg-warning text-dark">
              <p class="h3 font">神秘链接♂:</p>
            </div>

            <!-- 折叠组件1 csshtml-->
            <div class="card-body row d-flex justify-content-around">
              <div class="accordion text-light" id="accordionExample">
                <!-- 折叠按钮标题组件 -->
                <div class="accordion-item bg-dark text-light">
                  <h2 class="accordion-header" id="headingOne">
                    <button
                      class="accordion-button bg-warning text-dark"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#collapseOne"
                      aria-expanded="true"
                      aria-controls="collapseOne"
                    >
                      CSS&HTML
                    </button>
                  </h2>

                  <div
                    id="collapseOne"
                    class="accordion-collapse collapse show"
                    aria-labelledby="headingOne"
                    data-bs-parent="#accordionExample"
                  >
                    <!-- 折叠文字部分 -->
                    <div
                      class="accordion-body d-flex justify-content-around row"
                    >
                      <!-- 展开列表的链接按钮 -->

                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        09 雪碧图作业</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        10 跳动的爱心</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        11 小米商城作业</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        12 鼎搜网案例</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        13 周末作业-家装</a
                      >
                      <!-- 最后一个补齐 -->
                      <a href="" class="col-3 m-1"> </a>
                      <div></div>
                    </div>
                    <!-- 折叠文字结束 -->
                  </div>
                </div>
              </div>
            </div>

            <!-- 折叠组件2 -->
            <div class="card-body row d-flex justify-content-around">
              <div class="accordion text-light" id="accordionExample">
                <!-- 折叠按钮标题组件 修改id的one two three -->
                <div class="accordion-item bg-dark text-light">
                  <h2 class="accordion-header" id="headingTwo">
                    <button
                      class="accordion-button bg-warning text-dark"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#collapseTwo"
                      aria-expanded="true"
                      aria-controls="collapseTwo"
                    >
                      JavaScript
                    </button>
                  </h2>

                  <div
                    id="collapseTwo"
                    class="accordion-collapse collapse show"
                    aria-labelledby="headingTwo"
                    data-bs-parent="#accordionExample"
                  >
                    <!-- 折叠文字部分 -->
                    <div
                      class="accordion-body d-flex justify-content-around row"
                    >
                      <!-- 展开列表的链接按钮 -->
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        14 运算符</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        15 循环</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        16 字符串</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        17 数组作业</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        18 dom</a
                      >
                      <!-- 最后一个补齐 -->
                      <a href="" class="col-md-3 text-dark btn btn-dark m-1">
                      </a>
                    </div>
                    <!-- 折叠文字结束 -->
                  </div>
                </div>
              </div>
            </div>

            <!-- 折叠组件3 -->
            <div class="card-body row d-flex justify-content-around">
              <div class="accordion text-light" id="accordionExample">
                <!-- 折叠按钮标题组件 修改id的one two three -->
                <div class="accordion-item bg-dark text-light">
                  <h2 class="accordion-header" id="headingThree">
                    <button
                      class="accordion-button bg-warning text-dark"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#collapseThree"
                      aria-expanded="true"
                      aria-controls="collapseThree"
                    >
                      Vue
                    </button>
                  </h2>

                  <div
                    id="collapseThree"
                    class="accordion-collapse collapse show"
                    aria-labelledby="headingThree"
                    data-bs-parent="#accordionExample"
                  >
                    <!-- 折叠文字部分 -->
                    <div
                      class="accordion-body d-flex justify-content-around row"
                    >
                      <!-- 展开列表的链接按钮 -->
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                      <a href="" class="col-md-3 text-dark btn btn-warning m-1">
                        第一个网页</a
                      >
                    </div>
                    <!-- 折叠文字结束 -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 卡片图片 -->
          <div class="row mt-2">
            <div class="container col-12 col-sm-6">
              <img
                src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/d1b9d5aaca97d666f991d592fa704dd.jpg"
                alt=""
                class="card-img"
              />
            </div>

            <div class="container bg-dark rounded-3 col-md-5 d-flex flex-column justify-content-center ">
              <h2 class="h2 mb-5 text-warning">广告位招租:</h2>
              <div class="🤚 align-self-end container ">
                <div class="👉"></div>
                <div class="👉"></div>
                <div class="👉"></div>
                <div class="👉"></div>
                <div class="🌴"></div>
                <div class="👍"></div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="./bootstrap-5.3.0-alpha1-dist (1)/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
  </body>
</html>
